import React, { useEffect, useRef, useState } from 'react';
import { YmReactDnd } from 'ym-design';
import Box from './Box';
const { useDrop } = YmReactDnd;

type DragItem = {
  id: string;
  left: number;
  top: number;
};

const containerStyles: React.CSSProperties = {
  width: 300,
  height: 300,
  border: '1px solid black',
  position: 'relative',
};

function Container({ hideSourceOnDrag }: any) {
  const dropDomRef = useRef<HTMLDivElement>(null);
  const [boxes, setBoxes] = useState<
    Record<string, { top: number; left: number; title: string }>
  >({
    a: { top: 0, left: 0, title: 'Drag A around' },
    b: { top: 180, left: 20, title: 'Drag B  too' },
  });

  useEffect(() => {
    if (!dropDomRef.current) return;
    const { left, top } = dropDomRef.current.getBoundingClientRect();
    console.log('--container--left--top--:', left, top);
  }, []);

  const [
    {
      dragStartEventClientOffset = { x: 0, y: 0 },
      dropEventClientOffset = { x: 0, y: 0 },
    },
  ] = useDrop<
    DragItem,
    any,
    {
      dragStartEventClientOffset: { x: number; y: number };
      dropEventClientOffset: { x: number; y: number };
    }
  >(
    {
      accept: 'box',
      dropNode: dropDomRef.current,
      drop(item, monitor) {
        const dragStartEventClientOffset =
          monitor.getDragStartEventClientOffset() ?? { x: 0, y: 0 };
        const dropEventClientOffset = monitor.getClientOffset() ?? {
          x: 0,
          y: 0,
        };
        const delta = {
          x: dropEventClientOffset.x - dragStartEventClientOffset.x,
          y: dropEventClientOffset.y - dragStartEventClientOffset.y,
        };

        console.log(
          '--dropEventClientOffset--dragStartEventClientOffset--',
          dropEventClientOffset,
          dragStartEventClientOffset,
        );

        // const delta = monitor.getDifferenceFromInitialOffset(); // 差值

        const left = Math.round(item.left + delta.x);
        const top = Math.round(item.top + delta.y);
        console.log('--drop--delta--left--top--:', delta, left, top);
        boxes[item.id] = { ...boxes[item.id], top, left };
        setBoxes({ ...boxes });
      },
      collect: (monitor) => ({
        dragStartEventClientOffset: monitor.getDragStartEventClientOffset() ?? {
          x: 0,
          y: 0,
        },
        dropEventClientOffset: monitor.getClientOffset() ?? { x: 0, y: 0 },
      }),
    },
    [dropDomRef.current],
  );

  return (
    <div>
      <div style={{ marginBottom: '30px' }}>
        <p>drag dom源是drop dom源的子级</p>
        <p>monitor.getDifferenceFromInitialOffset()</p>
        <p>315.125 88</p>
        <p>
          dragStart: {dragStartEventClientOffset.x}-
          {dragStartEventClientOffset.y}
        </p>
        <p>
          dropEvent: {dropEventClientOffset.x}-{dropEventClientOffset.y}
        </p>
      </div>
      <div ref={dropDomRef} style={containerStyles}>
        {Object.keys(boxes).map((key) => {
          const { left, top, title } = boxes[key];
          return (
            <Box
              key={key}
              id={key}
              left={left}
              top={top}
              hideSourceOnDrag={hideSourceOnDrag}
            >
              {title}
            </Box>
          );
        })}
      </div>
    </div>
  );
}

export default Container;
